import Vue from 'vue'

const div = document.createElement('div')
document.body.appendChild(div)

// new Vue({
//   el: '#root',
//   template: '<div>this is content</div>'
// })

const app = new Vue({
  template: '<div ref="div">this is content: {{text}} {{obj.a}}</div>',
  data: {
    text: 0,
    obj: {}
  }
  // ,
  // watch: {
  //   text (newText, oldText) {
  //     console.log(`${newText} : ${oldText}`)
  //   }
  // }
})
app.$mount('#root')

// let i = 0
setInterval(() => {
  // i++

  //  vue是异步渲染
  app.text += 1
  app.text += 1
  app.text += 1
  app.text += 1
  app.text += 1
  // app.obj.a = i
  // app.$set(app.obj, 'a', i)
  // app.$delete()
  // app.$forceUpdate()
  // app.$options.data += 1
  // app.$data.text += 1
}, 1000)
// console.log(app.$data)
// console.log(app.$props)
// console.log(app.$el)
// console.log(app.$options)
// app.$options.render = (h) => {
//   return h('div', {}, 'new Render function')
// }
// console.log(app.$root)
// console.log(app.$root === app)
// console.log(app.$children)
// console.log(app.$slots)
// console.log(app.$scopedSlots)
// console.log(app.$refs)
// console.log(app.$isServer)

// 监听器
// const unWatch = app.$watch(
//   'text', (newText, oldText) => {
//     console.log(`${newText} : ${oldText}`)
//   }
// )

// 定时器
// setTimeout(() => {
//   unWatch()
// }, 2000)

// 事件
// app.$on('test', (a, b) => {
// app.$once('test', (a, b) => {
//   console.log('test emited: ' + (a + b))
// })

// 触发事件
// app.$emit('test', 1, 2)
// setInterval(() => {
//   app.$emit('test', 2, 2)
// })

// 重新渲染
// app.$forceUpdate()
